<template>
  <div class="list bg-white px-3 mb-0">
    <buttonSearch class="pt-3" placeholder="手机号/邮箱/会员名称">
      <template #left>
        <!-- 左边按钮 -->
        <el-button type="primary" size="mini" @click="openModal(false)">添加会员</el-button>
      </template>
      <template #form>
        <el-form :inline="true">
          <el-form-item label="搜索内容:" class="mb-0">
            <el-input
              placeholder="手机号/邮箱/会员名称"
              size="mini"
              v-model="search.keyword"
            ></el-input>
          </el-form-item>
          <el-form-item label="会员等级:" class="mb-0">
            <el-select
              v-model="search.group_id"
              placeholder="请选择会员等级"
              size="mini"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布时间:" class="mb-0">
            <el-date-picker size="small"
            v-model="search.time"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份">
            </el-date-picker>
          </el-form-item>
          <br />
          <el-form-item class="mb-0">
            <el-button type="info" size="mini" @click="searchEvent"
              >搜索</el-button
            >
            <el-button size="mini" @click="clearSearch"
              >清空搜索条件</el-button
            >
          </el-form-item>
        </el-form>
      </template>
    </buttonSearch>
    <!-- 商品列表 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px; margin-bottom: 60px"
      border
      ref="multipleTable"
    >
      <el-table-column label="会员" width="280">
        <template v-slot="scope">
          <div class="media">
            <img :src="scope.row.avatar" class="mt-3 mr-3 rounded-circle" style="width:45px;height:45px">
            <div class="media-body">
              <h6 class="mt-0 d-flex align-items-center justify-content-between">
                {{scope.row.username}}<el-button type="text" size="medium">详情</el-button>
              </h6>
              <p>用户id：{{scope.row.id}}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="level.name" label="会员等级" align="center" width="180">
      </el-table-column>
      <el-table-column label="登陆注册" align="center" width="280">
        <template v-slot='scope'>
          <div>注册时间：{{scope.row.create_time}}</div>
          <div>最后登陆：{{scope.row.update_time}}</div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="180">
        <template v-slot="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot='scope'>
          <el-button type="text" size="medium" @click="openModal(scope)">修改</el-button>
          <el-button type="text" size="medium">重置密码</el-button>
          <el-button type="text" size="medium" @click="delItem(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-footer
      class="d-flex align-items-center p-0 border-top position-fixed elFoot"
    >
      <div class="pl-2">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </el-footer>
    <!-- 添加规格对话框 -->
    <el-dialog
      title="添加会员"
      :visible.sync="dialogVisible"
      width="40%"
      top="0"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="form.username"
            placeholder="用户名"
            size="mini"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            placeholder="密码"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input
            v-model="form.nickname"
            placeholder="昵称"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <div>
            <!-- 如果image中没有图片 就显示+号 否则显示图片 -->
            <div class="btn btn-light border" v-if="!form.avatar">
                <i class="el-icon-plus" @click="choose"></i>
            </div>
            <img v-else :src="form.avatar" class="rounded" style="width:35px;height:35px;cursor:pointer" @click="choose">
          </div>
        </el-form-item>
        <el-form-item label="会员等级:" class="mb-0">
            <el-select
              v-model="form.level_id"
              placeholder="请选择会员等级"
              size="mini"
            >
              <el-option label="普通会员" :value='1'></el-option>
              <el-option label="黄金会员" :value='2'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机" prop="phone">
          <el-input
            v-model="form.phone"
            placeholder="手机"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="form.email"
            placeholder="邮箱"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex" size="mini">
            <el-radio :label="0" border>保密</el-radio>
            <el-radio :label="1" border>男性</el-radio>
            <el-radio :label="2" border>女性</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status" size="mini">
            <el-radio :label="0" border>启用</el-radio>
            <el-radio :label="1" border>禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import buttonSearch from "@/components/common/button-search";
export default {
  name: "list",
  inject: ['app'],
  data() {
    return {
      superSearch: false,
      //   类型
      options: ["普通会员", "黄金会员"],
      // 列表数据
      tableData: [
        {
          id: 10,
          username: "用户名",
          avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F11%2F3%2F59feb3aa-4250-4f5d-acb5-cb2efb635b17.png%3FimageView2%2F2%2Fw%2F500&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641790508&t=18e8472c78aa51569713d987a1a4886a",
          level_id: 1,
          level: {
            id:1,
            name:'普通会员'
          },
          create_time:'2022-01-01 18:00:00',
          update_time:'2022-01-01 18:00:00',
          status:1,
          sex:1
        }
      ],
      currentPage: 1,
      dialogVisible: false,
      search:{
        keyword:'',
        group_id:'',
        time:''
      },
      form: {
        username: "",
        password: '',
        status: 1,
        sex: 1,
        nickname:'',
        avatar:'',
        level_id:1,
        phone:'',
        email:''
      },
      editIndex: -1,
    };
  },
  components: {
    buttonSearch,
  },
  props: {},
  created() {},
  computed: {},
  watch: {},
  methods: {
    delItem(item) {
      this.$confirm("是否删除该会员?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(item.$index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    openModal(e) {
      if (!e) {
        // 初始化表单
        this.form = {
          username: "",
          password: '',
          status: 1,
          nickname:'',
          avatar:'',
          level_id:1,
          phone:'',
          email:'',
          sex:0
        };
        this.editIndex = -1;
      } else {
        this.form = {
          username: e.row.username,
          password: '',
          status: e.row.status,
          nickname:e.row.nickname,
          avatar:e.row.avatar,
          level_id:e.row.level_id,
          phone:e.row.phone,
          email:e.row.email,
          sex:e.row.sex
        };
        this.editIndex = e.$index;
      }
      this.dialogVisible = true;
    },
    submit() {
        let msg = "";
        // 添加表单内容
        if (this.editIndex === -1) {
          this.form.level = {
            id:1,
            name:'普通会员'
          }
          this.tableData.unshift(this.form);
          msg = "添加表单内容成功";
        } else {
          // 修改表单内容  this.tableData[this.editIndex] = this.form一起修改有问题 只能单个进行修改
          let item = this.tableData[this.editIndex];
          item.username = this.form.username;
          item.password = this.form.password;
          item.status = this.form.status;
          item.nickname = this.form.nickname;
          item.avatar = this.form.avatar;
          item.level_id = this.form.level_id;
          item.phone = this.form.phone;
          item.email = this.form.email;
          item.sex = this.form.sex;
          msg = "修改表单内容成功";
        }
        this.dialogVisible = false;
        this.$message({
          message: msg,
          type: "success",
        });
    },
    // 改变商品状态
    changeStatus(item) {
      item.status = item.status === 1 ? 0 : 1;
      this.$message({
        message: item.status ? "启用" : "禁用",
        type: "success",
      });
    },
    // 搜索商品
    searchEvent(e) {
      if (typeof e == "string") {
        console.log("搜索", e);
        return;
      }
      console.log("超级搜索");
    },
    // 清空搜索条件
    clearSearch() {
      this.search= {
        keyword:'',
        group_id:'',
        time:''
      }
      this.$refs.buttonSearch[this.tabIndex].closeSuperSearch();
    },
    choose() {
    //    接收image-dialog传来的chooselist数组，即res就是chooselist
        this.app.chooseImage(res => {
            this.form.avatar=res[0].url
        },3)
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  margin: -20px;
  margin-top: -8px;
  background-color: white;
}
.elFoot {
  width: 100%;
  bottom: 0;
  background-color: white;
  z-index: 10;
}
/deep/.el-dialog__body {
  padding: 15px 20px;
}
</style>
